<template>
  <div class="share" @mousemove.stop.prevent="qrMove" @mouseup.stop.prevent="qrUp">

      <Breadcrumb>
          <BreadcrumbItem>活动设置</BreadcrumbItem>
          <BreadcrumbItem>好友设置</BreadcrumbItem>
      </Breadcrumb>

      <Tabs v-bind:value="tabs[tabs_index].name" v-on:on-click="changeTabs">
          <TabPane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">

              <!--S分享设置-->
              <div id="transpond" v-if="item.name == 'transpond'">
                  <Form :model="form_data" :rules="ruleData">

                      <!--S分享开关-->
                      <FormItem label="是否开启好友系统">
                          <i-switch v-model="form_data.open_share" size="large">
                              <span slot="open">开启</span>
                              <span slot="close">关闭</span>
                          </i-switch>
                      </FormItem>
                      <!--E分享开关-->

                      <!--S分享者距离活动区域多少公里之内生效-->
                      <FormItem label="超出设置距离，只添加好友无好友奖励(单位:公里，0=不限至奖励生效距离)" prop="take_km">
                          <Input v-model="form_data.take_km" placeholder="超出设置距离，只添加好友无好友奖励(单位:公里，0=不限至奖励生效距离)"></Input>
                      </FormItem>
                      <!--S分享者距离活动区域多少公里之内生效-->

                      <!--S成功邀请新增可开宝箱数量-->
                      <FormItem label="成功添加好友赠送可开宝箱数量" prop="add_bz">
                          <Input v-model="form_data.add_bz" placeholder="成功添加好友赠送可开宝箱数量"></Input>
                      </FormItem>
                      <!--S成功邀请新增可开宝箱数量-->

                      <!--S确定设置按钮-->
                      <FormItem>
                          <Button type="primary" @click="submit(form_data)">确定设置</Button>
                      </FormItem>
                      <!--E确定设置按钮-->
                  </Form>
              </div>
              <!--E分享设置-->

              <!--S海报设置-->
              <div id="poster" v-if="item.name == 'poster'">
                  <Row>
                      <Col span="6">
                          <div id="box" :style="bg_style" ref="box">
                              <div class="qrcode" :style="qrcode_style" @mousedown.stop.prevent="qrDown" ref="qrcode">
                                  <img :src="qrcode" />
                                  <div class="size-control" @mousedown.stop.prevent="sizeDown"></div>
                              </div>
                          </div>
                      </Col>
                      <Col span="7">
                          <Form :model="poster_data">

                              <!--S海报背景-->
                              <FormItem label="海报背景">
                              <imgInput v-model="poster_path" @remove="poster_path = ''"></imgInput>
                              </FormItem>
                              <!--E海报背景-->

                              <!--S确定设置按钮-->
                              <FormItem>
                                  <Button type="primary" @click="submitPoster(poster_data)">确定设置</Button>
                              </FormItem>
                              <!--E确定设置按钮-->

                          </Form>
                      </Col>
                  </Row>
              </div>
              <!--E海报设置-->

              <!--S系统好友设置-->
              <div id="friend" v-if="item.name == 'friend'">
                  <Button class="add-friend" type="primary" @click="friend.show_add_friend = true">添加好友</Button>
                  <!--S列表-->
                  <Table :columns="friend.th" :data="friend.tr"></Table>
                  <!--E列表-->

                  <!--S添加好友区域-->
                  <Drawer v-model="friend.show_add_friend" title="添加好友" width="500" :mask-closable="false">
                      <Form ref="friend_data" :model="friend.data" :rules="friend.rules">
                          <FormItem prop="name" label="好友名">
                              <Input type="text" v-model="friend.data.name" placeholder="好友名"></Input>
                          </FormItem>
                          <FormItem prop="header" label="头像">
                              <imgInput v-model="friend.data.header"></imgInput>
                          </FormItem>
                          <FormItem prop="open_count" label="赠送可开宝箱数量">
                              <Input type="text" v-model.number="friend.data.open_count" placeholder="赠送可开宝箱数量"></Input>
                          </FormItem>
                          <FormItem>
                              <Button @click="addFriendSubmit('friend_data')" type="primary">确认添加</Button>
                          </FormItem>
                      </Form>
                  </Drawer>
                  <!--E添加好友区域-->
              </div>
              <!--E系统好友设置-->

          </TabPane>
      </Tabs>

      <Spin size="large" fix v-if="loading"></Spin>
  </div>
</template>

<script>
import qrcode from './image/qrcode.png';
import imgInput from '../../components/ImgInput/ImgInput.vue';
export default {
  name: 'share',
  data(){
    let self = this;
    return {
      //--公共--
      session:{},  //登录信息
      loading:false,
      //--参数--
      activity_id:0,  //活动id
      //--tabs--
      tabs:[
        {label:'好友设置',name:'transpond',type:1},
        {label:'添加好友海报设置',name:'poster',type:2},
        {label:'系统好友',name:'friend',type:3}
      ],
      tabs_index:0,
      //表单
      form_data:{
          open_share:false, //是否开启分享
          add_bz:1,  //成功邀请新增可开宝箱数量
          take_km:10    //千米公里
      },
        //数据验证
        ruleData:{
            add_bz:[
                { required: true, message: '不能为空'},
            ],
            take_km:[
                { required: true, message: '不能为空'},
            ]
        },
      //海报表单
      poster_data:{
          qr_width:100,  //二维码宽度
          qr_height:100,  //二维码高度
          qr_left:0,  //二维码left值
          qr_top:0   //二维码top值
      },
      poster_path:'',  //海报背景路径
      qrcode:qrcode,   //二维码图片地址
        //操作二维码
      qr_down:false,   //是否点着二维码
      size_down:false,   //控制二维码大小点击
        //系统好友
      friend:{    //好友
          th:[
              {
                  title:'好友名',
                  key:'name'
              },
              {
                  title:'头像',
                  key:'header',
                  render:(h,params)=>{
                      return h('img',{
                          attrs:{
                              src:sysinfo.attachurl+params.row.header
                          },
                          style:{
                              width:'40px',
                              height:'40px',
                              verticalAlign:'middle',
                              objectFit: 'contain'
                          }
                      });
                  }
              },
              {
                  title:'赠送开宝箱数量',
                  key:'open_count'
              },
              {
                  title:'操作',
                  key:'control',
                  render:(h,params)=>{
                      return h('div',[
                          h('Button',{
                              props:{
                                  type:'error',
                                  size:'small'
                              },
                              style:{
                                  marginRight:'5px'
                              },
                              on:{
                                  click:()=>{
                                      this.$Modal.warning({
                                          title:"提示",
                                          content: "确定要删除系统好友吗？",
                                          onOk(){
                                                self.deleteSystemFriend(params.row.id);
                                          }
                                      });
                                  }
                              }
                          },'删除')
                      ]);
                  }
              }
          ],
          tr:[],  //系统好友列表
          show_add_friend:false,
          data:{  //表单数据
            activity_id:window.sysinfo.activity_id,
            name:"",  //昵称
            header:"",  //头像
            open_count:1,   //可赠送可开宝箱数量
          },
          rules:{
              name:[
                  {required:true,message:'昵称不能为空'},
                  {max:10,message:'昵称长度不能大于10'}
              ],
              header:[
                  {required:true,message:'请上传一张头像'},
              ],
              open_count:[
                  {required:true,message:'不能为空'},
                  {type:"number",min:1,max:100,message:"请输入正确的数值,1-100"}
              ]
          }
      }
    }
  },
  components:{
      imgInput
  },
  computed:{
        take_m(){
            return this.form_data.take_km * 1000;
        },
        open_share(){
            return this.form_data.open_share ? 1 : 0;
        },
        bg_style(){
            return {
                'background-image':'url('+sysinfo.attachurl+this.poster_path+')'
            }
        },
        qrcode_style(){
            return {
                width:this.poster_data.qr_width+'px',
                height:this.poster_data.qr_height+'px',
                top:this.poster_data.qr_top+'px',
                left:this.poster_data.qr_left+'px'
            }
        }
    },
  created(){
    this.activity_id = window.sysinfo.activity_id;
  },
    mounted(){
        this.findData();
        this.getSystemFriendList();
    },
  methods:{
      //切换tabs
      changeTabs(res){
          if(res == 'virtual'){
              this.tabs_index = 0;
          }else if(res == 'poster'){
              this.tabs_index = 1;
          }else if(res == 'friend'){
              this.tabs_index = 2;
          }
      },
      //获取数据
      findData(){
          Axios.post(sysinfo.url,Qs.stringify({
              pages:'share',
              doing:'findData',
              activity_id:this.activity_id
          }))
              .then((res)=>{
                  if(res.data.status == 'success'){
                      var data = res.data.data;
                      this.form_data.open_share = (data.open_share == 1) ? true : false;
                      this.form_data.take_km = data.take_m / 1000;
                      this.form_data.add_bz = data.add_bz;
                      this.poster_data = {
                          qr_left:parseInt(data.qr_left),
                          qr_top:parseInt(data.qr_top),
                          qr_width:parseInt(data.qr_width),
                          qr_height:parseInt(data.qr_height)
                      }
                      this.poster_path = data.poster_path;
                  }
              })
              .catch(error=>console.log(error));
      },
      //提交
      submit(data){
          if(parseInt(data.add_bz) != data.add_bz || data.add_bz < 1){
              this.$Message.error('请输入正确的宝箱新增数量');
          }
          if(parseFloat(data.take_km) != data.take_km || data.take_km < 0){
              this.$Message.error('请输入正确的分享奖励生效公里');
          }
          var data_data = {
              open_share:this.open_share,
              take_m:this.take_m,
              add_bz:this.form_data.add_bz
          }
          Axios.post(sysinfo.url,Qs.stringify({
              pages:'share',
              doing:'setSetting',
              activity_id:this.activity_id,
              data:data_data
          }))
              .then((res)=>{
                  console.log(res.data);
                  if(res.data.status == 'success') {
                      this.$Message.success('设置成功');
                  }else{
                      this.$Message.error('设置失败');
                  }
              })
              .catch(error=>console.log(error));
      },
      //提交海报设置
      submitPoster(data){
          var data_data = {
              poster_path:this.poster_path,
              qr_width: data.qr_width,
              qr_height: data.qr_height,
              qr_left: data.qr_left,
              qr_top:data.qr_top
          }
          Axios.post(sysinfo.url,Qs.stringify({
              pages:'share',
              doing:'setSetting',
              activity_id:this.activity_id,
              data:data_data
          }))
              .then((res)=>{
                  if(res.data.status == 'success') {
                      this.$Message.success('设置成功');
                  }else{
                      this.$Message.error('设置失败');
                  }
              })
              .catch(error=>console.log(error));
      },
      //二维码点击
      qrDown(){
          this.qr_down = true;
      },
      //控制大小点击
      sizeDown(){
          this.size_down = true;
      },
      //移动
      qrMove(event){
          if(this.qr_down){
            this.poster_data.qr_left += event.movementX;
            this.poster_data.qr_top += event.movementY;
            if(this.poster_data.qr_left <= 0) this.poster_data.qr_left = 0;
            if(this.poster_data.qr_top <=0) this.poster_data.qr_top = 0;
            var max_left = this.$refs.box[0].getBoundingClientRect().width - this.$refs.qrcode[0].getBoundingClientRect().width;
            if(this.poster_data.qr_left >= max_left) this.poster_data.qr_left = max_left;
            var max_top = this.$refs.box[0].getBoundingClientRect().height - this.$refs.qrcode[0].getBoundingClientRect().height;
            if(this.poster_data.qr_top >= max_top) this.poster_data.qr_top = max_top;
          }else if(this.size_down){
              this.poster_data.qr_width += event.movementX;
              this.poster_data.qr_height += event.movementX;
              if(this.poster_data.qr_width <= 30 || this.poster_data.qr_height <= 30){
                  this.poster_data.qr_width = 30;
                  this.poster_data.qr_height = 30;
              }
              var max_size = this.$refs.box[0].getBoundingClientRect().width - this.$refs.qrcode[0].getBoundingClientRect().left;
              if(this.poster_data.qr_width >= max_size || this.poster_data.qr_height >= max_size){
                  this.poster_data.qr_width = max_size;
                  this.poster_data.qr_height = max_size;
              }
          }
          return false;
      },
      //二维码鼠标松开
      qrUp(){
          this.qr_down = false;
          this.size_down = false;
      },
      //添加朋友发送
      addFriendSubmit(valid_data){
          this.$refs[valid_data][0].validate((valid) => {
              if(valid){
                  Axios.post(sysinfo.url,Qs.stringify({
                    pages:'friend',
                    doing:'addSystemFriend',
                    data:this.friend.data
                  }))
                      .then((res)=>{
                          if(res.data.status == 'success'){
                              this.getSystemFriendList();
                              this.$Message.success("添加成功");
                              this.friend.data.header = "";
                              this.friend.data.name = "";
                              this.friend.data.open_count = 1;
                              this.$refs[valid_data][0].resetFields();
                          }else{
                              this.$Message.error("添加失败");
                          }
                      });
              }
          })
      },
      //获取列表
      getSystemFriendList(){
          Axios.post(sysinfo.url,Qs.stringify({
              pages:'friend',
              doing:'getSystemFriendList',
              activity_id:this.activity_id
          }))
              .then((res)=>{
                  if(res.data.status == "success"){
                      this.friend.tr = res.data.data;
                  }else{
                      this.friend.tr = [];
                  }
              });
      },
      //删除系统好友
      deleteSystemFriend(friend_id){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:"friend",
            doing:"deleteSystemFriend",
            friend_id
        }))
            .then((res)=>{
                if(res.data.status == "success"){
                    this.getSystemFriendList();
                }else{
                    this.$Message.error("删除失败");
                }
            });
      }
  }
}
</script>

<style lang="less" src="./share.less" scoped></style>
